<!--
 * @Description: 首页
 * @Date: 2024-02-02 11:16:50
 * @FilePath: \demod:\12electron\electron-demo\src\renderer\src\views\home\index.vue
-->
<template>
  <div class="container">
    <TopHeader />
    <div
      style="display: flex; flex-direction: column; justify-content: center; align-items: center"
    >
      <img alt="logo" class="logo" src="@renderer/assets/electron.svg" />
      <div class="creator">Powered by electron-vite</div>
      <div class="text">
        Build an Electron app with
        <span class="vue">Vue</span>
        and
        <span class="ts">TypeScript</span>
      </div>
      <p class="tip">请按下 <code>F12</code> 打开devTool</p>
      <div class="actions">
        <div class="action">
          <a href="https://electron-vite.org/" target="_blank" rel="noreferrer">官方文档</a>
        </div>
        <div class="action">
          <a target="_blank" rel="noreferrer" @click="ipcHandle">发送IPC消息给主进程</a>
        </div>
      </div>
    </div>

    <Versions />
    <BgMusic />
  </div>
</template>

<script lang="ts" setup name="home">
import TopHeader from '@renderer/components/TopHeader.vue';
import Versions from '@renderer/components/Versions.vue';

import BgMusic from '@renderer/components/bgMusic.vue';

const ipcHandle = () => window.electron.ipcRenderer.send('ping')
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  font-size: 20px;
  color: #fff;
}
</style>
